<template>
  <div class="video-style-panel">
    <div class="row-title" style="margin-bottom: 22px;">视频预览封面</div>
    <div class="background-image-wrapper">
      <!-- <FileInput @change="files => setVideoPoster(files)">
        <div class="background-image">
          <div class="content" :style="{ backgroundImage: `url(${handleElement.poster})` }">
            <IconPlus />
          </div>
        </div>
      </FileInput> -->
      <dd class="addimg" @click="openMediaLibrary">
        <Tooltip :mouseLeaveDelay="0" :mouseEnterDelay="0.5" title="设置封面">
          <div class="background-image">
            <div class="content" :style="{ backgroundImage: `url(${handleElement.poster})` }">
              <IconPlus />
            </div>
          </div>
        </Tooltip>
      </dd>
    </div>
    <div class="row"><Button style="flex: 1;" @click="updateVideo({ poster: '' })">重置封面</Button></div>
    <Divider />
    <ElementWidthHeight />
  </div>
</template>

<script lang="ts">
import { defineComponent , onMounted, watch} from 'vue'
import { storeToRefs } from 'pinia'
import { useMainStore, useSlidesStore } from '@/store'
import { PPTVideoElement } from '@/types/slides'
import { getImageDataURL } from '@/utils/image'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import ElementWidthHeight from '../common/ElementWidthHeight.vue'

import { useEditorStore } from '@/store'
const editorStore = useEditorStore()

export default defineComponent({
  name: 'video-style-panel',
  components: {
    ElementWidthHeight,
  },
  setup() {
    const slidesStore = useSlidesStore()
    const { handleElement } = storeToRefs(useMainStore())

    const { addHistorySnapshot } = useHistorySnapshot()

    const updateVideo = (props: Partial<PPTVideoElement>) => {
      if (!handleElement.value) return
      slidesStore.updateElement({ id: handleElement.value.id, props })
      addHistorySnapshot()
    }

    // 设置视频预览封面
    const setVideoPoster = (files: File[]) => {
      const imageFile = files[0]
      if (!imageFile) return
      getImageDataURL(imageFile).then(dataURL => updateVideo({ poster: dataURL }))
    }
    
    //打开媒体库上传背景图片
    const openMediaLibrary = () => {
      editorStore.setSourceType('1')
      editorStore.setMediaCategroy('videopreviewimage')
      editorStore.setCloudToggle(true)
    }
    
    const resetSource = () => {
      editorStore.setMediaCategroy('')
      editorStore.setCloudToggle(false)
      editorStore.setSourceUrl('')
      editorStore.setSourceType('')
      editorStore.setAudioUrl('')
      editorStore.setSourcePreview(false)

    }

     const initEvent = () => {
      window.addEventListener(
        "message",
        (e) => {
          if(e.data.source == 'freeeditor') {
          if (e.data.data.length) {
            if (editorStore.mediaCategroy === 'videopreviewimage') {
              resetSource()

              let sel = e.data.data[0].fileUrl
              console.log("选择媒体库 图片", sel)
              updateVideo({ poster: sel })
              addHistorySnapshot()
            }

          }
        }
        },
        false
      )
    }
onMounted(() => {
      initEvent()
    })
    return {
      handleElement,
      updateVideo,
      setVideoPoster,
      openMediaLibrary,
      initEvent
    }
  }
})
</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 22px;
}
.title {
  margin-bottom: 22px;
}
.background-image-wrapper {
  margin-bottom: 10px;
}
.background-image {
  height: 0;
  padding-bottom: 56.25%;
  border: 1px dashed $borderColor;
  border-radius: $borderRadius;
  position: relative;
  transition: all $transitionDelay;

  &:hover {
    border-color: $themeColor;
    color: $themeColor;
  }

  .content {
    @include absolute-0();

    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
</style>